<template>
  <view style="background-color: #fff">
    <view class="flex-jcsb" style="padding: 40rpx">
      <view style="font-size: 32rpx; color: #333">选择车牌</view>
      <view style="color: #1f93ff" @click="addPlate">添加车牌号</view>
    </view>
    <scroll-view scroll-y="true" style="height: 30vh">
      <view class="plate-box">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="plate flex-center"
          :class="item === plate ? 'picked' : ''"
          @click="pickPlate(item)"
        >
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { useVehicleStore } from '@/stores/vehicle';
import { computed } from 'vue';

defineProps<{ plate: string }>();

const vehicleStore = useVehicleStore();
const list = computed(() => vehicleStore.plateList);
const emit = defineEmits(['add', 'pick']);

function addPlate() {
  emit('add');
}
function pickPlate(plate: string) {
  emit('pick', plate);
}
</script>

<style scoped lang="less">
.plate-box {
  padding: 0 40rpx;
  display: grid;
  grid-template-columns: repeat(3, 202rpx);
  gap: 24rpx 32rpx;

  .plate {
    color: #666;
    height: 80rpx;
    border: 2rpx solid rgba(179, 179, 179, 0.25);
    border-radius: 5px;
    // box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(179, 179, 179, 0.25);
    position: relative;
    overflow: hidden;

    &.picked {
      color: #1b91ff;
      border-color: #1b91ff;
    }
  }
}
</style>
